<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">基本配置</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">审批配置</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 teamManage -->
    <!-- 添加团队 -->
    <div class="content">
      <p class="header">审批配置</p>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入审批人称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button type="primary" plain @click="approvalType()"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加团队 -->
    <!-- 管理团队 -->
    <div class="manage">
      <!-- <p class="headerAdd"><el-button type='primary' @click="openAdiog">新增权限</el-button></p> -->
      <div class="table">
        <el-table :data="tableData.list">
          <el-table-column
            type="index"
            label="序号"
            width="100"
          ></el-table-column>
          <el-table-column prop="typeName" label="类型"></el-table-column>
          <el-table-column label="审配人" prop="userNames"></el-table-column>
          <!-- <el-table-column label="状态" prop="statusName"></el-table-column> -->
          <el-table-column
            label="更新时间"
            prop="createdTime"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="optain">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="添加/修改"
                  placement="top-start"
                >
                  <p
                    @click="
                      Visible = true;
                      viewPermissions(scope.row);
                    "
                    v-if="parArray.indexOf('sptj') != -1"
                  >
                    添加/修改
                  </p>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--  -->
        <div class="page" v-if="tableData.totalNum >= 8">
          <div class="block">
            <el-pagination
              background=""
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-size="1"
              layout="total, prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="tableData.totalPage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 管理客户等级 -->
    <!-- 对话弹框 -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      :title="title"
    >
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="权限名称">
          <el-input v-model="form.name" placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="权限描述">
          <el-input
            type="textarea"
            v-model="form.remark"
            placeholder="请输入权限描述"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-radio v-model="form.status" label="A">开启</el-radio>
          <el-radio v-model="form.status" label="S">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="btnloading"
          @click="
            dialogFormVisible = false;
            updateBattery();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 对话弹框 -->
    <!-- 对话弹框 -->
    <el-dialog
      :visible.sync="Visible"
      :append-to-body="true"
      :title="title"
      :before-close="handleClose"
    >
      <div class="tree">
        <el-input
          style="margin: 0 0px 20px"
          placeholder="输入关键字进行搜索"
          v-model="filterText"
        ></el-input>
        <el-tree
          class="el-menu-vertical-demo"
          ref="tree"
          :data="tree"
          :props="defaultProps"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :default-expand-all="true"
          :filter-node-method="filterNode"
        ></el-tree>
      </div>
      <div class="table1">
        <el-table
          ref="multipleTable"
          :data="tablePerson.list"
          style="width: 100%"
          :row-key="getRowKey"
          @select="selectEvent"
          @select-all="handleAllChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50"
            align="center"
            v-model="multipleSelection"
          ></el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="100"
          ></el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="props">
              <p @click="toInfo(props.row)">{{ props.row.reallyName }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
            prop="phoneNumber"
          ></el-table-column>
          <el-table-column label="所在部门">
            <template slot-scope="props">
              <span>{{ props.row.orgName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="职位" prop="positionName"></el-table-column>
          <el-table-column label="员工状态" prop="statusName"></el-table-column>
          <!-- <el-table-column label="创建时间" prop="createdTime"></el-table-column> -->
        </el-table>
        <!-- 分页start -->
        <div class="page" v-if="tablePerson.totalNum >= 5">
          <div class="block">
            <span class="demonstration">共{{ tablePerson.totalPage }}页</span>
            <span class="demonstration">总共{{ tablePerson.totalNum }}条</span>
            <el-pagination
              background=""
              @current-change="handleCurrent"
              :current-page.sync="page1"
              :page-size="1"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="tablePerson.totalPage"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 分页end -->
      </div>
      <div class="checked">
        <p>选中员工</p>
        <ul class="employee">
          <li v-for="(items, index) in multipleSelection" :key="items.id">
            <span>{{ items.orgName }}-{{ items.reallyName }}</span>
            <icon
              class="el-icon-circle-close"
              style="position: absolute; right: -1px; top: -1px"
              @click="deleteOne(items)"
            ></icon>
            <!-- <p class='colse' @click='delect(index)'>×</p> -->
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            selectId = [];
            Visible = false;
            toggleSelection();
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          :loading="btnloading"
          @click="
            Visible = false;
            submission();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 对话弹框 -->
    <div class="box1">
      <el-dialog
        :visible.sync="addCont"
        append-to-body
        title="添加审批配置"
        width="40%"
        height="300px"
      >
        <div class="approveStyle">
          <span>类型</span>
          <el-select
            v-model="approvalCont.name"
            filterable
            placeholder="请选择审批类型"
            clearable
          >
            <el-option
              v-for="items in approval"
              :key="items.dictId"
              :label="items.dictName"
              :value="items.dictId"
            ></el-option>
          </el-select>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" type="primary" @click="updateAdd"
            >确 定</el-button
          >
          <el-button size="mini" @click="addCont = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    },
  },
  data () {
    return {
      formInline: {
        name: "",
      },
      approvalCont: {
        name: "",
      },
      tableData: [],
      currentPage1: 1,
      form: {
        name: "",
        remark: "",
        status: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      manage: [],
      manageId: "",
      orgName: "",
      btnloading: false,
      authId: "",
      title: "新增权限",
      //菜单权限
      Visible: false,
      filterText: "",
      data: [],
      defaultProps: {
        children: "children",
        label: "orgName",
      },
      getArray: [],
      strictly: true,
      tree: [],
      tablePerson: [],
      page1: 1,
      multipleSelection: [],
      selectId: [],
      multipleS: [],
      limits: "",
      parArray: [],
      showType: "",
      addCont: false,
      approval: [],
    };
  },
  created () {
    this.teamList("1");
    this.treeAxios();

    // 权限设定判断 normsCode
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "configurationCode"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断 normsCode
  },
  activated () {
    // this.teamList("1");
    // this.treeAxios();
  },
  methods: {
    deleteOne (rows) {
      this.multipleSelection = this.multipleSelection.filter(
        (v1) => v1.id != rows.id
      );
      this.selectId = this.selectId.filter((v) => v != rows.id);
      this.tablePerson.list.map((item) => {
        if (item.id === rows.id) {
          this.$refs.multipleTable.toggleRowSelection(item, false);
        }
      });
    },
    delect (index) {
      this.multipleSelection.splice(index, 1);
      this.selectId.splice(index, 1);
    },
    handleClose (down) {
      this.$refs.multipleTable.clearSelection();
      this.selectId = [];
      down(); //关闭弹框
    },
    toggleSelection () {
      this.$refs.multipleTable.clearSelection();
      // console.log('初始化失败')
    },
    selectEvent (selecteds, row) {
      if (!this.selectId.includes(row.id)) {
        // 回显数据里没有本条，把这条加进来(选中)
        this.multipleSelection.push(row);
        this.selectId.push(row.id);
      } else {
        // 回显数据里有本条，把这条删除(取消选中)
        this.selectId.forEach((id, index) => {
          if (id == row.id) {
            this.selectId.splice(index, 1);
            this.multipleSelection.splice(index, 1);
          }
        });
      }
    },
    // 全选、取消全选
    handleAllChange (selecteds) {
      this.multipleSelection = selecteds;
    },
    getRowKey (row) {
      return row.id;
    },
    //**数据请求**//
    treeAxios () {
      this.axios
        .post("/sys/v1/org/tree", {
          request: {
            orgName: "",
            status: "",
          },
          version: "",
        })
        .then((res) => {
          if (res.code == 0) {
            this.tree = res.data;
            this.staiffList("1", res.data[0].orgCode);
          }
        });
    },
    /***员工列表***/
    staiffList (pageNo, orgCode) {
      this.axios
        .post(
          "/sys/v1/user/employee/list",
          {
            request: {
              endTime: "",
              keyWord: "",
              orgCode: orgCode,
              pageNo: pageNo,
              pageSize: 5,
              phoneNumber: "",
              positionCode: "",
              reallyName: "",
              startTime: "",
              status: "",
              username: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.tablePerson = res.data;
            // if(pageNo>=2){
            this.echoData();
            // }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    submission () {
      if (this.approvalCont.name != "") {
        this.showType = this.approvalCont.name;
      }
      this.axios
        .post("/sys/v1/approver/settings/save", {
          request: {
            type: this.showType,
            userIds: this.selectId,
          },
          version: "",
        })
        .then((res) => {
          if (res.code == 0) {
            this.Visible = false;
            this.teamList("1");
            this.approvalCont.name == "";
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //**数据请求**//
    handleNodeClick (data) {
      this.orgCode = data.orgCode;
      this.staiffList("1", data.orgCode);
    },
    handleCurrent (val) {
      this.staiffList(`${val}`, this.orgCode);
    },
    // el-tree 复选框默认选中事件
    // 搜索过滤数据
    filterNode (value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    // 搜索过滤数据
    // 查看菜单权限
    viewPermissions (row) {
      this.selectId = [];
      this.showType = row.type;
      this.strictly = true;
      this.multipleSelection = row.userList;
      row.userList.forEach((i) => {
        this.selectId.push(i.id);
      });
      this.echoData();
    },
    //** 回显数据判断 **//
    echoData () {
      if (!this.is_null(this.multipleSelection)) {
        this.$nextTick(() => {
          this.selectId.forEach((v, i) => {
            this.tablePerson.list.forEach((_v, _i) => {
              if (v === _v.id) {
                this.$refs.multipleTable.toggleRowSelection(_v, true);
              }
            });
          });
        });
      }
    },
    //** 回显数据判断 **//
    resetChecked () {
      this.$refs.tree.setCheckedKeys([]);
    },
    updateAdd () {
      if (this.approvalCont.name == "") {
        this.$message.warning("审批类型不能为空");
      } else {
        this.addCont = false;
        this.Visible = true;
      }
    },
    //菜单权限选择//
    handleCurrentChange (val) {
      this.teamList(`${val}`);
    },
    onSearch () {
      this.teamList(1);
    },
    /**
     * 审批类型
     **/
    approvalType () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=approver_type", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          // console.log(res);
          this.addCont = true; //弹框启动
          this.approvalCont.name = "";
          if (res.code == 0) {
            this.approval = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    openAdiog () {
      this.dialogFormVisible = true;
      this.title = "新增角色";
      this.authId = "";
      this.form = {
        name: "",
        remark: "",
        status: "A",
      };
    },
    // 角色列表
    teamList (pageNo) {
      this.axios
        .post("/sys/v1/approver/settings/list", {
          request: {
            pageNo: pageNo,
            pageSize: 8,
          },
          version: "",
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 角色列表
    toGroup (row) {
      this.$router.push({
        path: "/groupManage",
        query: {
          id: row.id,
        },
      });
    },

    // 停用启动

    // 删除团队
    is_null: function (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.approveStyle {
  span {
    display: inline-block;
    margin-right: 20px;
  }
  /deep/.el-input__icon {
    line-height: 30px;
    height: 30px;
  }
}

.el-menu-vertical-demo {
  width: 200px;
}

.checked::-webkit-scrollbar {
  display: none;
}

.checked {
  padding: 10px;
  overflow-y: scroll;
  height: 140px;
  width: 70%;
  display: inline-block;

  p {
    font-size: 15px;
    color: #55aaff;
    font-weight: bold;
  }

  .employee {
    margin: 10px 0;

    li {
      display: inline-block;
      padding: 5px 15px;
      border-radius: 5px;
      border: 1px solid #55aaff;
      color: #55aaff;
      margin-right: 10px;
      position: relative;
      margin-bottom: 10px;

      .colse {
        position: absolute;
        top: -8px;
        right: 0;
        font-size: 16px;
        color: #55aaff;
      }
    }
  }
}

.table1 {
  display: inline-block;
  height: 330px;
  marigin-left: 10px;
  width: 740px;
  // border: 1px solid #000;
}

.tree {
  height: 600px;
  overflow-y: scroll;
  width: 250px;
  float: left;
}

/deep/.el-dialog__header {
  background: #409eff;
  padding: 10px 20px 10px;

  .el-dialog__title {
    color: #fff;
  }
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 1052px;
  // height: 700px;
}

/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.content {
  padding: 10px;
  background: #fff;

  .el-button {
    padding: 6px 10px;
  }
}

.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.headerAdd {
  padding: 10px 0;

  /deep/.el-button {
    padding: 10px;
  }
}

.demo-form-inline {
  margin-top: 10px;
}

/deep/.el-input__inner {
  height: 30px;
  line-height: 30px;
}

.manage {
  margin-top: 20px;
  padding: 10px;
  background: #fff;
}

/deep/.has-gutter .cell {
  text-align: center;
  color: #2d7ddf;
}

/deep/.cell {
  text-align: center;
}

.optain {
  width: 100%;
  text-align: center;

  p {
    display: inline-block;
    vertical-align: middle;
    color: #0074d9;
    padding: 0 10px;
  }

  p:hover {
    cursor: pointer;
  }
}

.name {
  font-size: 16px;
  color: #2d7edf;
  margin: 10px 0;
}

.page {
  text-align: right;
  margin-top: 20px;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
